﻿@{
    ViewBag.Title = "ContentForm";
    Layout = "~/Views/Shared/_Form.cshtml";
}

<!--jqgrid表格组件start-->
<link href="~/Content/scripts/plugins/jqgrid/jqgrid.css" rel="stylesheet" />
<script src="~/Content/scripts/plugins/jqgrid/grid.locale-cn.js"></script>
<script src="~/Content/scripts/plugins/jqgrid/jqgrid.min.js"></script>
<!--表格组件end-->

<script>
    var keyValue = request('keyValue');
    var TypeId = request('TypeId');
    var Category = request('Category');
    $(function () {
        initControl();
        GetGrid();
    })
    function initControl() {
        //类型方式
        $("#Type").ComboBox({
            description: "==请选择==",
        });
        $("#Type").ComboBoxSetValue("0");
        var _url = "";
        if (Category == "1") {//开店
            _url = "../../SystemManage/DataItemDetail/GetDataItemTreeJson?EnCode=OpenShopWorkType";
        }
        else if (Category == "2") {//闭店
            _url = "../../SystemManage/DataItemDetail/GetDataItemTreeJson?EnCode=CloseShopWorkType";
        }
        else {
            _url = "";
        }
        //类别
        $("#TypeId").ComboBoxTree({
            url: _url,
            description: "==请选择==",
            height: "200px",
            click: function (item) {
                TypeId = item.id;
            }
        });
        $("#TypeId").ComboBoxTreeSetValue(TypeId);
    }
    function GetGrid() {
        var $gridTable = $("#gridTable");
        $gridTable.jqGrid({
            datatype: "json",
            height: 229,
            autowidth: true,
            unwritten: false,
            colModel: [
                { label: "Id", name: "Id", hidden: true },
                {
                    label: "类型", name: "Type", width: 80, align: "left", sortable: false
                },
                { label: "排序", name: "Sort", index: "Sort", hidden: true },
                { label: "标识", name: "Flag", width: 60, align: "left", sortable: false },
                { label: "文本名称", name: "Text", width: 100, align: "left", sortable: false },
                { label: "文本值", name: "Value", width: 100, align: "left", sortable: false },
                { label: "默认值", name: "DefaultValue", width: 80, align: "left", sortable: false },
                { label: "值类型", name: "ValueType", width: 80, align: "left", sortable: false },
                { label: "最小值", name: "MinValue", width: 80, align: "left", sortable: false },
                { label: "最大值", name: "MaxValue", width: 80, align: "left", sortable: false },
                {
                    label: "异常", name: "IsException", width: 50, align: "left", sortable: false,
                    formatter: function (cellvalue, options, rowObject) {
                        return cellvalue == 0 ? "<i value=" + cellvalue + " class=\"fa fa-toggle-off\"></i>" : "<i value=" + cellvalue + " class=\"fa fa-toggle-on\"></i>";
                    }
                },
                {
                    label: "默认", name: "IsDefault", width: 50, align: "left", sortable: false,
                    formatter: function (cellvalue, options, rowObject) {
                        return cellvalue == 0 ? "<i value=" + cellvalue + " class=\"fa fa-toggle-off\"></i>" : "<i value=" + cellvalue + " class=\"fa fa-toggle-on\"></i>";
                    }
                }
            ],
            caption: "规则设计",
            rowNum: "1000",
            rownumbers: true,
            shrinkToFit: false,
            gridview: true,
            hidegrid: false
        });
        //获取表单
        if (!!keyValue) {
            $.SetForm({
                url: "../../DailyEventManage/OpenShop/GetContentJson",
                param: { keyValue: keyValue },
                success: function (data) {
                    $("#form1").SetWebControls(data);
                    $("#TypeId").ComboBoxSetValue(data.TypeId);
                    $("#Type").ComboBoxSetValue(data.Type);
                    $gridTable[0].addJSONData(JSON.parse(data.TypeDecription));
                }
            });
        }
    }

    //添加
    function btn_add_field() {
        var type = $('#Type').attr('data-value');
        if (type == undefined) {
            dialogMsg('请选择类型,录入型或选择型！', 0);
            return false;
        }
        else {
            var intType = -1;
            var strType = $("#gridTable").jqGrid("getRowData");
            if (strType.length > 0) {
                if (strType[0].Type == "录入型") intType = 0;
                else intType = 1
            }
            if (intType > -1 && type != intType) {
                dialogMsg('类型选择有误，不允许出现多种类型！', 0);
                return false;
            }
            else if (intType == 0) {
                dialogMsg('录入型不允许出现多种规则！', 0);
                return false;
            }
            else {
                dialogOpen({
                    id: "ContentItemForm",
                    title: '添加',
                    url: '/DailyEventManage/OpenShop/ContentItemForm?Type=' + type,
                    width: "450px",
                    height: "350px",
                    callBack: function (iframeId) {
                        top.frames[iframeId].AcceptClick();
                    }
                });
            }
        }
    };
    //修改
    function btn_edit_field() {
        var keyValue = $("#gridTable").getGridParam('selrow');
        var type = $('#Type').attr('data-value');
        if (checkedRow(keyValue)) {
            dialogOpen({
                id: "ItemForm",
                title: '修改',
                url: '/DailyEventManage/OpenShop/ContentItemForm?Type=' + type + '&keyValue=' + keyValue,
                width: "450px",
                height: "320px",
                callBack: function (iframeId) {
                    top.frames[iframeId].AcceptClick();
                }
            });
        }
    }
    //移除
    function btn_delete_field() {
        var keyValue = $("#gridTable").getGridParam('selrow');
        if (keyValue) {
            dialogConfirm('注：您确定要移除吗？该操作将无法恢复？', function (r) {
                if (r) {
                    $("#gridTable").delRowData(keyValue);
                    dialogMsg("移除成功。", 1);
                }
            });

        } else {
            dialogMsg('请选择需要移除的数据！', 0);
        }
    }
    //保存表单
    function AcceptClick() {
        if (!$('#form1').Validform()) {
            return false;
        }
        var postData = $("#form1").GetWebControls(keyValue);
        postData["TypeId"] = $("#TypeId").attr('data-value');
        postData["Category"] = Category;
        postData["Type"] = $("#Type").attr('data-value');
        var obj = $("#gridTable").jqGrid("getRowData");
        for (var i = 0; i < obj.length; i++) {
            obj[i].IsDefault = obj[i].IsDefault.substring(10, 11);
            obj[i].IsException = obj[i].IsException.substring(10, 11);
        }
        postData["TypeDecription"] = JSON.stringify(obj);
        $.SaveForm({
            url: "/DailyEventManage/OpenShop/SaveContentForm?keyValue=" + keyValue,
            param: postData,
            loading: "正在保存数据...",
            success: function () {
                $.currentIframe().$("#gridTable").trigger("reloadGrid");
            }
        })
    }
</script>
<div class="border-left border-right border-top" style="margin: 5px; margin-bottom: 0px; padding-bottom: 2px;">
    <div style="height: 130px;">
        <table class="form">
            <tr>
                <th class="formTitle" style="text-align: left; padding-left: 7px; width: 65px;">名&nbsp;&nbsp;&nbsp;&nbsp;称<font face="宋体">*</font></th>
                <td class="formValue">
                    <input id="Name" type="text" class="form-control input-underline" placeholder="请输入名称" isvalid="yes" checkexpession="NotNull" />
                </td>
                <th class="formTitle" id="tag" style="text-align: left; padding-left: 7px; width: 65px;">工作类型@*<font face="宋体">*</font>*@</th>
                <td class="formValue">
                    <div id="TypeId" type="select" class="ui-select ui-underline" @*isvalid="yes" checkexpession="NotNull"*@></div>
                </td>
            </tr>
            <tr>
                <th class="formTitle" style="text-align: left; padding-left: 7px; width: 65px;">编&nbsp;&nbsp;&nbsp;&nbsp;码<font face="宋体">*</font></th>
                <td class="formValue">
                    <input id="Code" type="text" class="form-control  input-underline" placeholder="请输入编码" isvalid="yes" checkexpession="NotNull" />
                </td>
                <th class="formTitle" style="text-align: left; padding-left: 7px; width: 65px;">类&nbsp;&nbsp;&nbsp;&nbsp;型<font face="宋体">*</font></th>
                <td class="formValue">
                    <div id="Type" type="select" class="ui-select ui-underline" isvalid="yes" checkexpession="NotNull">
                        <ul>
                            <li data-value="0">录入型</li>
                            <li data-value="1">选择型</li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <th class="formTitle" valign="top" style="text-align: left; padding-left: 7px; width: 65px;top:10px;">
                    是否必填<font face="宋体">*</font>
                </th>
                <td class="formValue " colspan="3">
                    <input id="IsNeed" type="checkbox" checked="checked" />
                </td>
            </tr>
        </table>
    </div>
</div>
<div style="margin: 5px; margin-top: 0px; margin-bottom: 0px;">
    <table id="gridTable"></table>
    <style>
        .ui-jqgrid .ui-jqgrid-caption {
            text-align: right;
            padding-right: 5px;
            background-color: #F5F5F5;
        }
    </style>
</div>
<div class="toolbar" style="position: absolute; top: 145px; left: 10px;">
    <a id="lr-addField" class="btn btn-success btn-xs" onclick="btn_add_field()"><i class="fa fa-plus"></i>&nbsp;添加</a>
    <a id="lr-editField" class="btn btn-info btn-xs" onclick="btn_edit_field()"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
    <a id="lr-deleteField" class="btn btn-danger btn-xs" onclick="btn_delete_field()"><i class="fa fa-trash-o"></i>&nbsp;移除</a>
    @*<script>$('.toolbar').authorizeButton()</script>*@
</div>
